<template>
  <div>
    <ToDoHeader @addTodo="addTodo"></ToDoHeader>
    <ToDoFooter :lastLength="lastLength"  @updateStatus="updateStatus" ></ToDoFooter>
    <ToDoMain :list="showList" @delToDo="delToDo"></ToDoMain>
  </div>
  
</template>


<script setup>
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoFooter from './components/ToDoFooter.vue';
import ToDoMain from './components/ToDoMain.vue';

import { ref, computed  } from 'vue';
const list = ref([
  { id: 1, name: '晨练', done: false, },
  { id: 2, name: '练书法', done: true, },
]);

const addTodo = name => {     
  list.value.push({ 
    name, 
    done: false, 
    id: ~~(Math.random() * 1000) })
}

const delToDo = id => {
  list.value = list.value.filter(item => item.id !== id)
}

const lastLength = computed(() => {
  return list.value.filter(item => !item.done).length
})

const status = ref('all');
const showList = computed(() => {
  if (status.value === 'all') {
    return list.value
  }
  if (status.value === 'active') {
    return list.value.filter(item => !item.done)
  }
  if (status.value === 'completed') {
    return list.value.filter(item => item.done)
  }
})

const emit = defineEmits(['updateStatus']);

const updateStatus = status => {
  status.value = status // 将子组件的状态赋值给父组件

}
</script>

<style scoped>

</style>
